/*
    Vuex使用单一状态树，用一个对象就包含全部的应用顶层状态，这也意味着，每个应用将仅仅包含一个store实例
    state在使用的时候一般被挂载到子组件的computed计算属性上
*/
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

// Store对象
const store = new Vuex.Store({
  // 提供一个初始的state对象
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  }
})

const app = new Vue({
  el: '#app',
  // 把 store 对象提供给 “store” 选项，这可以把 store 的实例注入所有的子组件
  store,
  components: { Counter },
  template: `
    <div class="app">
      <counter></counter>
    </div>
  `
})


const Counter = {
  template: `<div>{{ count }}</div>`,
  computed: {
    count () {
      // 子组件访问$store对象
      return this.$store.state.count
    }
  }
}


